<!DOCTYPE html>
<html>
<head>
	<title>完善资料</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/user.css">
	<link rel="stylesheet" href="css/code_box.css">
	<script src="js/area_sichuan.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
	<style type="text/css">
		[v-cloak]{display: none;}
		.change_tips{color:#E82D2D;background: rgba(232,45,45,.1);;padding:.2rem;font-size: .28rem;border-radius: .04rem;}
	</style>
</head>
<body class="address_add means_work body_bg">
<div id="app" v-cloak>
	<!--完善资料 线上-->
    <ul class="address_box" v-if="line_type==1">
        <li class="title">收货地址</li>
        <li class="item">
            <label>姓名</label>
            <input type="text" placeholder="填写收货人姓名">
        </li>
        <li class="item">
            <label>联系电话</label>
            <input type="text" placeholder="填写手机号">
        </li>
        <li class="item">
            <label>验证码</label>
			<div class="verify_box">
				<input type="text" placeholder="填写验证码">
				<div class="verify tips">获取验证码</div>
			</div>

        </li>
        <li class="item">
            <label>所在地区</label>
            <div class="select_box" @click="address_modal=true">
                <input type="text" placeholder="选择所在地区" v-model="address" readonly>
                <img src="img/arr_right.png" class="icon_right" alt="">
            </div>
        </li>
        <li class="item">
            <label>详细地址</label>
            <input type="text" placeholder="填写详细地址">
        </li>
    </ul>
	<!--end of 完善资料 线上-->
	<!--完善资料 线下-->
	<ul class="address_box" v-if="line_type==2">
		<li class="title">销售信息</li>
		<li class="item">
			<label>实际售价</label>
			<input type="text" placeholder="填写实际售价">
		</li>
		<li class="item">
			<label>收款方式</label>
			<div class="select_box">
				<select name="" id="">
					<option value="0">支付宝</option>
					<option value="1">微信</option>
					<option value="2">现金</option>
					<option value="3">刷卡</option>
					<option value="4">其他</option>
				</select>
			</div>
		</li>
		<li class="item bg_gray">
			<label>验证码</label>
			<div class="verify_box">
				<input type="text" placeholder="填写验证码">
				<div class="verify tips">获取验证码</div>
			</div>

		</li>

	</ul>
	<!--end of 完善资料 线下-->
	<div v-if="line_type==3" class=" box_shadow_ff">
		<div class="change_tips">
			请根据示例图，上传对应的手持身份证的照片
		</div>
	</div>
	<ul class="address_box box_shadow_ff mt_20h">
		<li class="title">
			入网资料
		</li>
		<li class="item">
			<label>姓名</label>
			<input type="text" placeholder="填写使用人姓名">
		</li>
		<li class="item">
			<label>身份号码</label>
			<input type="text" placeholder="填写身份证号码">
		</li>
		<li class="item no_bottom">
			<label>身份证照</label>
			<div class="tips">
				请按照示例图，上传对应照片
			</div>
		</li>
	</ul>
	<div class="photo_box pad_usual disFlex">
		<div class="photo_info">
			<div class="ac">
				<img src="img/statusm1.png" class="icon_status end" alt="">
				<p class="tips_text">上传身份证正面图片</p>
				<div class="line_blue"></div>
			</div>
			<div class="ac">
				<img src="img/statusm2.png" class="icon_status" alt="">
				<p class="tips_text">上传身份证反面图片</p>
				<div class="line_blue"></div>
			</div>
			<div class="ac">
				<img src="img/statusm3.png" class="icon_status" alt="">
			</div>
		</div>
		<div class="photo_img">
			<div class="card_box">
				<img src="img/card_z.png" class="card_img" alt="">
				<p class="img_tips">身份证正面</p>
				<div class="file_box">
					<div class="file_up_box ">
						<img src="img/up_file.png" class="icon_file" alt="">
						<p class="img_tips">上传图片</p>
						<input type="file" class="up_file">
					</div>
					<div class="card_up hide">
						<img src="img/close_icon.png" class="icon_close" alt="">
						<img src="img/card_z.png" class="img_user" alt="">
					</div>
				</div>
			</div>
			<div class="card_box">
				<img src="img/card_f.png" class="card_img" alt="">
				<p class="img_tips">身份证反面</p>
				<div class="file_box">
					<div :class="{file_up_box:true,hide:!card_f.up}">
						<img src="img/up_file.png" class="icon_file"  alt="">
						<p class="img_tips">上传图片</p>
						<input type="file" class="up_file" @change="fileUp($event,2)">
					</div>
					<div :class="{card_up:true,hide:card_f.up}">
						<img src="img/close_icon.png" class="icon_close" @click.stop="card_f.up=true" alt="">
						<img :src="card_f.img" class="img_user" alt="">
					</div>
				</div>
			</div>
			<div class="card_box person">
				<img src="img/card_p.png" class="card_person" alt="">
				<p class="img_tips">手持身份证</p>
				<div class="file_box">
					<div class="file_up_box ">
						<img src="img/up_file.png" class="icon_file" alt="">
						<p class="img_tips">上传图片</p>
						<input type="file" class="up_file">
					</div>
					<div class="card_up hide">
						<img src="img/close_icon.png" class="icon_close" alt="">
						<img src="img/card_z.png" class="img_user" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="online">
		<span :class="{radio:true,manage:isCheck}" @click="isCheck=!isCheck"></span> 勾选则表示你已经充分了解并完全同意<span class="text_blue">《客户入网信息》</span>
	</div>
	<div class="mt_2rem btn_box manage">
		<div class="btn order_submit">提交资料</div>
	</div>
    <van-popup v-model="address_modal" position="bottom" :overlay="true">
        <van-area :area-list="areaList" value="510100" @confirm="onChangeadd" @cancel="address_modal = false" />
    </van-popup>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
<script src="js/public.js"></script>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{
        addressIf:false,
		isCheck:false,
        address_modal:false,
        areaList:Address,
		address:"",

		line_type:2,// 1 线上 2 线下
		card_z:{img:"",up:true},
		card_f:{img:"",up:true},
		card_p:{img:"",up:true}
	},
	methods:{
        defaultBtn:function () {
			this.addressIf = !this.addressIf;
        },
        onChangeadd:function (data) {
			console.log("onChangeadd",data);
			this.address=data[0].name+" "+data[1].name+" "+data[2].name;
			this.address_modal=false;
        },
        fileUp:function (file,i) {
            var that=this;
            var reader = new FileReader();
            reader.onload = function(evt){
                var result=evt.target.result;
                if(i==1){
                    that.card_z={img:result,up:false};
				}else if(i==2){
                    that.card_f={img:result,up:false};
				}else if(i==3){
                    that.card_p={img:result,up:false};
				}
            }
            reader.readAsDataURL(file.target.files[0]);
        }
	},
	created:function(){
	    var type = GetRequest().type
	    if(type){this.line_type=type}
	},
	mounted:function(){}
})	

</script>
</body>
</html>